<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>21-根据数据来设置下拉列表.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <select name="province"></select>
    <select name="city"></select>
    <select name="county"></select>
    <script>
      const data = {
        province: "广东省",
        city: "广州市",
        county: "天河区",
      };
      // 通过value来设置下拉列表选中项的时候 前提 是select 得先要有 对应的option！！！

      // 1 省 下拉列表来说 发送请求获取 省份列表  data.province
      // 1.1 根据 data.province 去设置 value属性

      // 2 市 根据 data.province 省 加载对应的  市 城市信息
      // 2.1  data.city 去设置 选中的市

      // 3 区 根据 data.province  和 data.city 去加载 区 信息
      // 3.1 根据  data.county 去设置 选中 区

      // document.querySelector(
      //   "[name='province']"
      // ).innerHTML = `<option value="${data.province}">${data.province}</option>`;
      // document.querySelector(
      //   "[name='city']"
      // ).innerHTML = `<option value="${data.city}">${data.city}</option>`;
      // document.querySelector(
      //   "[name='county']"
      // ).innerHTML = `<option value="${data.county}">${data.county}</option>`;
    </script>
  </body>
</html>
